<!--
 * @Author: your name
 * @Date: 2021-11-18 02:30:22
 * @LastEditTime: 2021-11-25 18:09:51
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \admin-template\src\views\task\edit.vue
-->
<template>
  <el-dialog :visible.sync="visible" title="更新任务状态" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" center width="35%" custom-class="dialogStyle treeDialog">
    <template slot="title">
      <div class="headerBack">
        <div class="iconBox">
          <div class="imgBox" />
        </div>
        <div class="titleBox">更新任务状态</div>
      </div>
    </template>
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="150px">
      <el-form-item label="任务类型" prop="state">
        <el-select v-model="dataForm.state" placeholder="选择任务类型">
          <el-option v-for="(item,index) in stateList" :key="index" :label="item.label" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button type="primary" class="saveBtn" @click="dataFormSubmitHandle()">确定</el-button>
      <el-button
        @click="
          visible = false;
          clearForm('dataForm');
        "
      >取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import '@/assets/scss/dialogGlobal.scss'
import debounce from 'lodash/debounce'

import { businessTaskUpdate } from '@/api/businessTask/api'

export default {
  data() {
    return {
      stateList: [
        // { id: 1, label: "未执行"},
        { id: 3, label: '已审核' },
        { id: 4, label: '已完成' }
      ],
      visible: false,
      dataForm: {
        id: 0,
        state: ``
      },
      dataRule: {
        state: [
          { required: true, message: '请填写', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 初始化
    init() {
      this.visible = true
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function() {
      this.$refs.dataForm.validate((valid) => {
        if (!valid) {
          return false
        }
        console.log('dataForm', this.dataForm)
        businessTaskUpdate(this.dataForm).then(res => {
          if (res.code == 200) {
            this.visible = false
            this.clearForm('dataForm')
            this.$emit('refreshDataList')
            this.$message.success(`操作成功！`)
          } else {
            this.$message.error(res.message)
          }
        })
      })
    }),
    // 清空表单
    clearForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
